<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img v-lazy="pageImgArr[0]" alt="">
        <span id="share" @click="shareForWechat">分享</span>
      </div>
    </div>
    <div class="relative nav" ref="tabMenu">
      <img v-lazy="pageImgArr[1]" alt="">
      <div class="width_25" :class="['scroll0'+(index+1)]" v-for="(mainItem,index) in 5" :key="index"></div>
    </div>
    <div class="module-container" v-for="(itemList,index) in pageGoodsIdArr" :key="index">
      <div><img :src="pageImgArr[index+2]" alt=""></div>
      <div class="goods-list" :style="{paddingLeft:index%2==0?0:'0.25rem'}">
        <div class="show-pic" v-if="index%2==0"><img :src="pageImgArr[index+12]" alt=""></div>
        <div class="show-goods"> 
          <div class="goods" v-for="(mainItem,index) in itemList.data" :key="index" @click="goForGoodsDetail(mainItem.goods_id)">
            <p><span class="topic">限时折扣</span><span class="price">￥{{mainItem.flash_price}}</span></p>
            <img :src="mainItem.img640_url" alt="">
          </div>
        </div>
        <div class="show-pic" v-if="index%2!=0" :style="{marginRight:0}"><img :src="pageImgArr[index+12]" alt=""></div>
      </div>
      <div class="show-special" :class="{'type':index % 2 ==0}">
        <img :src="itemList.speicalPic" alt="">
        <div class="special-entry" @click="goForSpecialDetail(specialIds[index].top)"></div>
        <div class="special-entry" @click="goForSpecialDetail(specialIds[index].bottom)"></div>
      </div>
    </div>
    <div class="more">
      <div class="more-title">#更多潮流单品#</div>
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
  </div>
</template>

<script>
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{SpecialItem},
    data(){
      return{
        pageImgArr:{},
        pageGoodsIds:[
          1596219,1603651,1596159,1596145,1596161,1596221,
          1593409,1596239,1596139,1596237,1596217,1596157,
          1596225,1596235,1596155,1593411,1596223,1596153,
          1596143,1596137,1596149,1596233,1596243,1596147,
          1596141,1596231,1596229,1596227,1596151,1596241
        ],
        specialIds:[{top:'71315',bottom:'71317'},{top:'71327',bottom:'70919'},{top:'71243',bottom:'71245'},{top:'71309',bottom:'71305'},{top:'71051',bottom:'71289'}],
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'71305,71309,71311,71303,71273,71289,71277,71299,71279,71315,71317,69453,71313,71327,70919,71051,71325,71257,71259,71319,71329,71245,71243,71233,71247,71249,71331,71225',
          specialArrList:[]
        }
      }
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.initPageImg();
      this.getGoodsAction();
    },
    mounted(){
      let that=this;
      this.moreSpecial();
    },
    methods:{
      initPageImg(){
        this.pageImgArr=[
          require('../../../assets/img/jogging/jogging01.jpg'),
          require('../../../assets/img/jogging/jogging02.jpg'),
          require('../../../assets/img/jogging/jogging03.jpg'),
          require('../../../assets/img/jogging/jogging04.jpg'),
          require('../../../assets/img/jogging/jogging05.jpg'),
          require('../../../assets/img/jogging/jogging06.jpg'),
          require('../../../assets/img/jogging/jogging07.jpg'),
          require('../../../assets/img/jogging/jogging08.jpg'),
          require('../../../assets/img/jogging/jogging09.jpg'),
          require('../../../assets/img/jogging/jogging10.jpg'),
          require('../../../assets/img/jogging/jogging11.jpg'),
          require('../../../assets/img/jogging/jogging12.jpg'),
          require('../../../assets/img/jogging/jogging13.jpg'),
          require('../../../assets/img/jogging/jogging14.jpg'),
          require('../../../assets/img/jogging/jogging15.jpg'),
          require('../../../assets/img/jogging/jogging16.jpg'),
          require('../../../assets/img/jogging/jogging17.jpg')
        ]
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(){
        let param = this.pageGoodsIds.toString();
        getGoodsListApi(param).then(res =>{
          let limitTop = 5,perPageNum=6;
          for (let index = 0; index < limitTop; index++) {
            let element={};
            let item = res.data.slice(index*perPageNum,(index+1)*perPageNum);
            element.data= item;
            element.speicalPic= this.pageImgArr[index+7];
            this.pageGoodsIdArr.push(element);
          }
        });
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>
<style lang="less" scoped>
.container{
  padding: 0rem 0.3rem 0.1rem 0.2rem;
  background: #D7ECFF;
}
.relative{
  position: relative;
  #share{
    width: 1rem;
    height: 0.45rem;
    line-height: 0.45rem;
    text-align: center;
    font-size: 0.3rem;
    color: #ffffff;
    position: absolute;
    top: 0.3rem;right: -0.25rem;
    background: #f77c09;
    border-radius: 0.45rem 0 0 0.45rem;
  }
}
.nav{
  width: 100%;
  height: 1.52rem;
  overflow: hidden;
  position: relative;
  div[class*='width']{
    width: 1.2rem;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
    &.scroll01{left: 0.1rem;}  
    &.scroll02{left: 1.5rem;}  
    &.scroll03{left: 2.9rem;}  
    &.scroll04{left: 4.3rem;}
    &.scroll05{left: 5.7rem;}   
  }
  &.fixed{
    position: fixed;
    top: 0;left: 0;
    z-index: 50;
  }
}
.abandon{padding-top:1.36rem; }
.module-container{
  .goods-list{
    display: flex;
    height: auto;
    background-image: url('../../../assets/img/jogging/jogging18.jpg');
    background-repeat: repeat-y;
    background-size: contain;
    .show-pic{
      width: 2.76rem;
      margin-right: 0.15rem;
    }
    .show-goods{
      width: 3.98rem;
      display: flex;
      flex-wrap: wrap;
      .goods{
        margin-right: 0.1rem;
        margin-top: 0.28rem;
        &:nth-child(2n){margin-right: 0;}
        &:nth-child(1){margin-top: 0;}
        &:nth-child(2){margin-top: 0;}
      }
      img{
        width: 1.9rem;
        height: 1.9rem;
        vertical-align: middle;
      }
      p{
        font-size: 0.24rem;
        line-height: 0.5rem;
        font-family: '微软雅黑';
      }
      .topic{
        display: inline-block;
        width: 1.1rem;
        margin-right: 0.04rem;
        text-align: center;
        background: #EB2F40;
        color: #ffffff;
      }
      .price{
        display: inline-block;
        width: 0.7rem;
        line-height: 0.5rem;
        font-weight: 600;
        font-family: '微软雅黑';
        font-size: 0.3rem;
        color:red ;
      }
    }
    &:nth-child(2n){
      .goods-list .show-pic{margin-right: 0}
    }
  }
  .show-special{
    position: relative;
    .special-entry{
      width: 5.3rem;
      height: 48%;
      position: absolute;
      top: 0;right: 0.15rem;
      &:nth-child(3){ height: 45%;top: 50%; }
    }
    &.type .special-entry{ left: 0.2rem; }
  }
}
.more {
  .more-title{
    line-height: 0.75rem;
    color: #333;
    background:transparent;
    font-size: 0.36rem;
    text-align: center;
    font-weight: 600;
    border:0.03rem solid #000;
    border-radius: 0.1rem;
    margin-top: 0.4rem;
  }
  .special {
    position: relative;
    width: 6.8rem;
    margin: 0.1rem auto 0;
  }
  .info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    color: #333;
    font-size: 0.28rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    .title {
      width: 55%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .date {
      width: 30%;
      height: 100%;
      text-align: right;
    }
  }
}
</style>